<template>
  <el-drawer
    title="搜索货品"
    :append-to-body="true"
    :visible.sync="visibility"
    size="39%"
  >
    <el-form
      ref="dataForm"
      :model="temp"
      :rules="rules"
      label-position="right"
      label-width="80px"
    >
      <el-form-item label="搜索方式">
        <el-radio-group v-model="searchMode" @change="handleSearchModeChange">
          <el-radio :label="0">按货号</el-radio>
          <el-radio :label="1">按识别码</el-radio>
          <el-radio :label="2">按简称</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="关键字">
            <el-input
              v-model="keywords"
              placeholder="请输入货号、识别码或货品简称"
              @blur="handleKeywordsChange"
            >
              <el-checkbox
                slot="append"
                v-model="fuzzyFlag"
                @change="handleKeywordsChange"
              >
                模糊搜索
              </el-checkbox>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="goodsOptions" label="待选货品">
            <el-select
              v-model="selectedGoods"
              value-key="goodsId"
              filterable
              @change="handleGoodsChange"
            >
              <el-option
                v-for="item in goodsOptions"
                :key="item.goodsId"
                :label="
                  item.goodsCode +
                  ', ' +
                  item.goodsAbbr +
                  ', ' +
                  item.goodsFullCode
                "
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showGoodsBatch">
        <el-col :span="12">
          <el-form-item v-if="showGoodsBatch" label="批号">
            <el-select
              v-model="selectedGoodsBatch"
              filterable
              value-key="goodsBatchId"
              @change="handleGoodsBatchChange"
            >
              <el-option
                v-for="item in goodsBatchOptions"
                :key="item.goodsBatchId"
                :label="item.goodsBatchCode"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            v-if="showGoodsType"
            label="类型"
            prop="goodsType"
            :rules="[{ required: true, message: '类型不能为空' }]"
          >
            <el-select v-model="temp.goodsType" @change="handleGoodsTypeChange">
              <el-option
                v-for="item in goodsTypeOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="temp.goodsCode">
        <el-col :span="12">
          <el-form-item label="货号" prop="goodsCode">
            <span>{{ temp.goodsCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货品识别码">
            <span>{{ temp.goodsFullCode }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="temp.goodsCode">
        <el-col :span="12">
          <el-form-item label="货品名称">
            <span>{{ temp.goodsName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商编码">
            <span>{{ temp.supplierCode }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="temp.goodsCode">
        <el-col :span="12">
          <el-form-item label="货品简称">
            <span>{{ temp.goodsAbbr }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格">
            <span>{{ temp.specification }} {{ temp.unit }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showGoodsBatch && temp.goodsBatchCode">
        <el-col :span="12">
          <el-form-item label="浓度">
            <span>{{ temp.concentration }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="浓度单位">
            <span>{{ temp.concentrationUnit }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showGoodsBatch && temp.goodsBatchCode">
        <el-col :span="12">
          <el-form-item label="生产日期">
            <span>{{ temp.productionDate }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="风险日期">
            <span
              :class="
                isDatePassby(temp.riskDate) ? 'danger-color' : 'info-color'
              "
            >
              {{ temp.riskDate }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="showGoodsBatch && temp.goodsBatchCode">
        <el-col :span="12">
          <el-form-item label="冻结日期">
            <span
              :class="
                isDatePassby(temp.freezeDate) ? 'danger-color' : 'info-color'
              "
            >
              {{ temp.freezeDate }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到期日期">
            <span
              :class="
                isDatePassby(temp.expirationDate)
                  ? 'danger-color'
                  : 'info-color'
              "
            >
              {{ temp.expirationDate }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <!-- :disabled="!temp.goodsId || (showGoodsBatch && !temp.goodsBatchId)" -->
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="handleCloseDialog">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import { isDatePassby } from '@/utils'
import {
  listGoodsByCode,
  listGoodsByFullCode,
  listGoodsByAbbr
} from '@/api/base/goods.js'
import { listGoodsBatchBySingleGoodsId } from '@/api/base/goodsBatch'
import { listAvailableGoodsBatch } from '@/api/wms/warehouseStock.js'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    goodsTypeOptions: {
      type: Array,
      default: null
    },
    showGoodsBatch: {
      type: Boolean,
      default: false
    },
    fetchGoodsBatchMode: {
      type: String,
      default: 'available'
    },
    showGoodsType: {
      type: Boolean,
      default: false
    },
    immediate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      searchMode: 0,
      keywords: null,
      fuzzyFlag: true,
      temp: {
        goodsType: 1
      },
      goodsOptions: null,
      selectedGoods: null,
      goodsBatchOptions: null,
      selectedGoodsBatch: null,
      rules: {
        goodsCode: [
          { required: true, message: '货品不可为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        this.searchMode = 0
        this.keywords = null
        this.fuzzyFlag = true
        this.reset()
      }
    },
    goodsOptions(value) {
      if (value && value.length > 0) {
        this.selectedGoods = value[0]
      } else {
        this.selectedGoods = null
      }
      this.rendGoods(this.selectedGoods)
    },
    goodsBatchOptions(value) {
      if (value && value.length > 0) {
        this.selectedGoodsBatch = value[0]
      } else {
        this.selectedGoodsBatch = null
      }
      this.rendGoodsBatch(this.selectedGoodsBatch)
    }
  },
  methods: {
    isDatePassby,
    handleCloseDialog() {
      this.visibility = false
    },
    reset() {
      this.temp = {
        goodsType: 1
      }
      this.goodsOptions = null
      this.selectedGoods = null
      this.goodsBatchOptions = null
      this.selectedGoodsBatch = null
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleGoodsTypeChange() {
      if (this.temp.goodsId) {
        listAvailableGoodsBatch({
          goodsIdSet: [this.temp.goodsId],
          goodsType: this.temp.goodsType
        }).then((res) => {
          this.goodsBatchOptions = res.data
        })
      }
    },
    handleSearchModeChange() {
      this.reset()
    },
    handleKeywordsChange() {
      if (!this.keywords || this.keywords.trim() === '') {
        return
      }
      if (this.searchMode === 0) {
        this.searchByGoodsCode()
      } else if (this.searchMode === 1) {
        this.searchByGoodsFullCode()
      } else {
        this.searchByGoodsAbbr()
      }
    },
    searchByGoodsCode() {
      listGoodsByCode({
        goodsCode: this.keywords,
        status: 1,
        fuzzyFlag: this.fuzzyFlag
      }).then((res) => {
        const data = res.data
        this.goodsOptions = data
      })
    },
    searchByGoodsFullCode() {
      listGoodsByFullCode({
        goodsFullCode: this.keywords,
        status: 1,
        fuzzyFlag: this.fuzzyFlag
      }).then((res) => {
        const data = res.data
        this.goodsOptions = data
      })
    },
    searchByGoodsAbbr() {
      listGoodsByAbbr({
        goodsAbbr: this.keywords,
        status: 1,
        fuzzyFlag: this.fuzzyFlag
      }).then((res) => {
        const data = res.data
        this.goodsOptions = data
      })
    },
    rendGoods(goods) {
      if (goods) {
        this.temp.goodsId = goods.goodsId
        this.temp.goodsCode = goods.goodsCode
        this.temp.goodsFullCode = goods.goodsFullCode
        this.temp.goodsName = goods.goodsName
        this.temp.goodsAbbr = goods.goodsAbbr
        this.temp.goodsChineseName = goods.goodsChineseName
        this.temp.unit = goods.unit
        this.temp.specification = goods.specification
        this.temp.supplierId = goods.supplierId
        this.temp.supplierCode = goods.supplierCode
        this.temp.category = goods.category
        if (this.fetchGoodsBatchMode === 'available') {
          listAvailableGoodsBatch({
            goodsIdSet: [goods.goodsId],
            goodsType: this.temp.goodsType
          }).then((res) => {
            this.goodsBatchOptions = res.data
          })
        } else {
          listGoodsBatchBySingleGoodsId({
            goodsId: goods.goodsId
          }).then((res) => {
            this.goodsBatchOptions = res.data
          })
        }
      } else {
        this.temp.goodsId = null
        this.temp.goodsCode = null
        this.temp.goodsFullCode = null
        this.temp.goodsName = null
        this.temp.goodsAbbr = null
        this.temp.goodsChineseName = null
        this.temp.unit = null
        this.temp.specification = null
        this.temp.supplierId = null
        this.temp.supplierCode = null
        this.temp.category = null
        this.goodsBatchOptions = null
      }
    },
    rendGoodsBatch(goodsBatch) {
      if (goodsBatch) {
        this.temp.goodsBatchId = goodsBatch.goodsBatchId
        this.temp.goodsBatchCode = goodsBatch.goodsBatchCode
        this.temp.concentration = goodsBatch.concentration
        this.temp.concentrationUnit = goodsBatch.concentrationUnit
        this.temp.productionDate = goodsBatch.productionDate
        this.temp.expirationDate = goodsBatch.expirationDate
        this.temp.riskDate = goodsBatch.riskDate
        this.temp.freezeDate = goodsBatch.freezeDate
      } else {
        this.temp.goodsBatchId = null
        this.temp.goodsBatchCode = null
        this.temp.concentration = null
        this.temp.concentrationUnit = null
        this.temp.productionDate = null
        this.temp.expirationDate = null
        this.temp.riskDate = null
        this.temp.freezeDate = null
      }
    },
    handleGoodsChange() {
      this.rendGoods(this.selectedGoods)
    },
    handleGoodsBatchChange() {
      this.rendGoodsBatch(this.selectedGoodsBatch)
    },
    handleConfirm() {
      let allowed = true
      if (
        this.temp.goodsType === 1 &&
        (isDatePassby(this.temp.freezeDate) ||
          isDatePassby(this.temp.expirationDate))
      ) {
        this.$confirm('货品已被冻结，或者已过期, 是否继续添加?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            allowed = true
          })
          .catch(() => {
            allowed = false
          })
      }
      if (allowed) {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.keywords && this.temp.goodsCode) {
              const currentTemp = Object.assign({}, this.temp)
              this.$emit('success', currentTemp)
              this.reset()
              if (this.immediate) {
                this.visibility = false
              }
            } else {
              this.$message.warning('请添加货品')
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

